<template>
	<view class="container">
		<view class="bac"></view>
		<view class="content">

			<view class="uli">
				<image></image>
				<view class="answer-title">{{text}}</view>
				<view class="answer-flex">
					<view>{{togal}}分</view>
					<view>总分:100分</view>
				</view>
			</view>
			<view class="list">
				<view class="title">答题卡</view>

				<view class="name">单项选择题</view>
				<view class="list-uli">
					<view v-for="(item,index) in correct" :key="index">
						<text class="circle">{{index+1}}</text>
						<image class="state" v-if="item == 'true'" src="../../static/success.png" mode=""></image>
						<image class="state" v-else src="../../static/fail.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-tar" @click="next">确定</view>
	</view>
</template>

<script>
		import {activityList,post} from '@/utils/interface.js'
export default {
	data() {
		return {
			sel: 'A',
			correct:[],
			togal:"",
			state:1,
			text:"",
			id:""
		};
	},
	methods: {
		details(index) {
			console.log('123');
			if (index == 0) {
				uni.navigateTo({
					url: '/pages/me/study-details'
				});
			} else {
				uni.navigateTo({
					url: '/pages/me/paper'
				});
			}
		},
		next() {
			if(this.state==2){
				post({method:"activities.task_ask_done",task_id:this.id,token:uni.getStorageSync('userToken')}).then(res=>{
					console.log(res.data);
					if(res.status == false){
						uni.showModal({
							title:"提示",
							content:res.msg,
							success(){
								uni.switchTab({
									url:'/pages/me/me'
								})
							}
						})
						
						return false
					}else{
						uni.switchTab({
							url:'/pages/me/me'
						})
					}
					
				})
			}else{
				uni.switchTab({
					url:'/pages/me/me'
				})
			}
			
		},
		onLoad(e){
			this.correct = e.correct.split(",");
			this.id = e.id
			var index = 0;
			let p = 100/this.correct.length; // 平均分
			this.correct.map(item=>{
				if(item=='true'){
					index++
				}
			})
			this.togal = index*p
			if(100-this.togal<=40){
				this.state = 2
				this.text='恭喜您，答题通过'
			}else{
				this.state = 3
				this.text='很遗憾,未通过'
			}			
		}
	}
};
</script>

<style>

.title-flex {
	display: flex;
	align-items: center;
}
.container {
}
.bac {
	height: 400upx;
	background: #4bcda4;
	z-index: -1;
}
.content {
	width: 710upx;
	position: absolute;
	top: 50upx;
	left: 20upx;
}
.state {
	width: 50upx;
	height: 50upx;
}
.uli {
	width: 670upx;
	height: 400upx;
	box-shadow: 0 0 10upx #dddddd;
	background: #ffffff;
	border-radius: 20upx;
}
.title-flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 80upx;
}
.answer-flex {
	display: flex;
	align-items: center;
	justify-content: space-around;
	height: 120upx;
}
.answer-flex view:nth-of-type(1) {
	border: 1px solid #4bcda4;
	color: #4bcda4;
	font-size: 28upx;
	padding: 4upx 30upx;
	font-weight: bold;
	border-radius: 60upx;
}
.answer-flex view:nth-of-type(2) {
	border: 1px solid #999999;
	color: #999999;
	font-size: 28upx;
	padding: 4upx 30upx;
	border-radius: 60upx;
}
.title-flex view:nth-of-type(1) {
	color: #ffffff;
}
.title-flex view:nth-of-type(2) {
	display: flex;
	align-items: center;
}
.title-flex view:nth-of-type(2) text {
	background: rgba(0, 0, 0, 0.2);
	color: #ffffff;
	border-radius: 20upx;
	font-size: 20upx;
	padding: 6upx 10upx;
}
.name {
	line-height: 100upx;
}
.uli {
	padding: 0 20upx;
}
.uli {
	text-align: center;
}
.uli image {
	width: 160upx;
	height: 160upx;
	background: red;
	margin-top: 40upx;
	border-radius: 100%;
}
.radio-li {
	height: 60upx;
	line-height: 60upx;
	display: flex;
	align-items: center;
}
.answer-title {
	font-size: 60upx;
}
.radio-li text {
	margin-right: 20upx;
	width: 40upx;
	height: 40upx;
	border-radius: 100%;
	line-height: 40upx;
	text-align: center;
	border: 1px solid #4bcda4;
	color: #4bcda4;
	font-size: 28upx;
}
.radio-li .after {
	background: #4bcda4;
	color: #ffffff;
}
.bottom-tar {
	position: fixed;
	bottom: 20upx;
	left: 20upx;
	width: 710upx;
	border-radius: 20upx;
	height: 80upx;
	line-height: 80upx;
	color: #ffffff;
	background: #4bcda4;
	text-align: center;
	font-size: 24upx;
}

.title {
	font-size: 36upx;
	line-height: 60upx;
	font-weight: bold;
	margin-top: 30upx;
}
.name {
	font-size: 28upx;
	line-height: 60upx;
	color: #999999;
}
.list-uli {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}
.list-uli view {
	width: 20%;
	display: flex;
	align-items: center;
	height: 80upx;
	justify-content: center;
	
}
.list-uli view:nth-of-type(5n){
	margin-right: 0;
}
.list-uli view text:nth-of-type(2){
	font-size: 26upx;
	color: #f00;
}
.circle {
	width: 40upx;
	height: 40upx;
	line-height: 40upx;
	border: 1upx solid #999999;
	color: #999999;
	display: inline-block;
	margin-right: 10upx;
	border-radius: 50%;
	font-size: 20upx;
	text-align: center;
}


</style>
